<template>
  <view class="content">
    <view class="header">
      <text class="title">uni-app 功能演示</text>
      <text class="subtitle">完整功能导航菜单</text>
    </view>
    
    <view class="menu-section">
      <view class="section-title">用户管理</view>
      <view class="menu-item" @click="navigateTo('/views/user/user')">
        <text class="item-title">用户中心</text>
        <text class="item-desc">用户管理功能演示</text>
      </view>
      <view class="menu-item" @click="navigateTo('/views/examples/user-info-demo')">
        <text class="item-title">用户信息获取示例</text>
        <text class="item-desc">获取微信用户详细信息</text>
      </view>
      <view class="menu-item" @click="navigateTo('/views/examples/wechat-debug')">
        <text class="item-title">微信API调试</text>
        <text class="item-desc">调试微信API问题</text>
      </view>
      <view class="menu-item" @click="navigateTo('/views/home/components-demo')">
        <text class="item-title">通用组件演示</text>
        <text class="item-desc">通用组件演示</text>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="section-title">网络请求</view>
      <view class="menu-item" @click="navigateTo('/views/api/api-demo')">
        <text class="item-title">API请求示例</text>
        <text class="item-desc">基础API调用演示</text>
      </view>
      <view class="menu-item" @click="navigateTo('/views/api/api-advanced')">
        <text class="item-title">API高级示例</text>
        <text class="item-desc">完整API功能演示</text>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="section-title">状态管理</view>
      <view class="menu-item" @click="navigateTo('/views/examples/pinia-demo')">
        <text class="item-title">Pinia状态管理示例</text>
        <text class="item-desc">Vue3状态管理解决方案</text>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="section-title">UI组件</view>
      <view class="menu-item" @click="navigateTo('/views/ui/native-components-demo')">
        <text class="item-title">原生组件示例</text>
        <text class="item-desc">使用uni-app原生组件</text>
      </view>
      <view class="menu-item" @click="navigateTo('/views/ui/uniui-demo')">
        <text class="item-title">uni-ui基础示例</text>
        <text class="item-desc">DCloud官方UI组件库基础用法</text>
      </view>
      <view class="menu-item" @click="navigateTo('/views/ui/uniui-complete-demo')">
        <text class="item-title">uni-ui完整示例</text>
        <text class="item-desc">DCloud官方UI组件库完整用法</text>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="section-title">Vue 3 特性</view>
      <view class="menu-item" @click="navigateTo('/views/examples/slot-demo')">
        <text class="item-title">插槽（Slot）示例</text>
        <text class="item-desc">Vue 3插槽功能演示</text>
      </view>
    </view>
    
    <view class="menu-section">
      <view class="section-title">微信API</view>
      <view class="menu-item" @click="navigateTo('/views/wechat/wechat-api')">
        <text class="item-title">微信API封装示例</text>
        <text class="item-desc">微信小程序常用API封装</text>
      </view>
      <view class="menu-item" @click="navigateTo('/views/examples/wechat-api-complete')">
        <text class="item-title">微信API完整示例</text>
        <text class="item-desc">微信小程序API完整功能演示</text>
      </view>
    </view>
    
    <view class="footer">
      <text class="footer-text">uni-app 多功能演示项目</text>
    </view>
    
    <!-- 引入自定义tabBar -->
    <CustomTabBar />
  </view>
</template>

<script setup>
import { onShow } from '@dcloudio/uni-app'

// 页面显示时通知tabBar更新选中状态
onShow(() => {
  uni.$emit('updateTabBar', 'views/home/menu')
})

// 导航到指定页面
const navigateTo = (url) => {
  uni.navigateTo({
    url
  })
}
</script>

<style scoped lang="scss">
.content {
  padding: 40rpx;
  background-color: $uni-bg-color-grey;
  min-height: 100vh;
  padding-bottom: 120rpx; /* 为tabBar留出空间 */
}

.header {
  text-align: center;
  margin-bottom: 60rpx;
  padding: 40rpx 0;
  background: linear-gradient(135deg, $uni-color-primary 0%, #764ba2 100%);
  border-radius: $uni-border-radius-lg;
  color: $uni-text-color-inverse;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 32rpx;
  opacity: 0.9;
  color: $uni-color-error;
}

.menu-section {
  background-color: $uni-bg-color;
  border-radius: $uni-border-radius-lg;
  margin-bottom: 40rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
}

.section-title {
  font-size: 36rpx;
  font-weight: bold;
  padding: 30rpx;
  border-bottom: 1rpx solid $uni-border-color;
  color: $uni-text-color;
}

.menu-item {
  padding: 30rpx;
  border-bottom: 1rpx solid $uni-bg-color-grey;
}

.menu-item:last-child {
  border-bottom: none;
}

.menu-item:active {
  background-color: $uni-bg-color-hover;
}

.item-title {
  font-size: 32rpx;
  font-weight: bold;
  color: $uni-text-color;
  display: block;
  margin-bottom: 10rpx;
}

.item-desc {
  font-size: 28rpx;
  color: $uni-text-color-grey;
}

.footer {
  text-align: center;
  margin-top: 60rpx;
  padding: 40rpx 0;
}

.footer-text {
  font-size: 28rpx;
  color: $uni-text-color-grey;
}
</style>